<!--
 * @Autor: dingxiaolin
 * @Date: 2021-10-13 16:10:53
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-11-13 18:06:37
-->
<template>
    <div id="barChart"></div>
</template>

<script>
//五天内监控药品销量top5药店
import echarts from 'echarts';
import { api } from '@/http/api';
export default {
    name: 'barChart',
    components: {},
    computed: {},
    data() {
        return {};
    },
    mounted() {
        setTimeout(() => {
            this.drawChart();
        });
    },
    methods: {
        drawChart() {
            var dataName = [];
            var dataNum = [];
            var barChart = echarts.init(document.getElementById('barChart'));
            window.addEventListener('resize', () => {
                barChart.resize();
            });
            api.InformationRecord_GetInformationRecordTop5DrugstoreName().then((res) => {
                res.map((v) => {
                    dataName.push(v.drugstoreName);
                    dataNum.push(v.count);
                });
                var option = {
                    title: [
                        {
                            left: '5%',
                            top: '5%',
                            text: '五天内监控药品销量top5药店',
                            textStyle: {
                                color: '#ddd',
                                fontSize: 14,
                            },
                        },
                    ],
                    tooltip: {
                        trigger: 'axis',
                        show: false,
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                        },
                    },
                    legend: {
                        show: false,
                    },
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            splitLine: {
                                show: false,
                            },
                            type: 'value',
                            show: false,
                        },
                    ],
                    yAxis: [
                        {
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                //y轴
                                show: false,
                            },
                            type: 'category',
                            axisTick: {
                                show: false,
                            },
                            inverse: true,
                            data: dataName,
                            axisLabel: {
                                color: '#A7D6F4',
                                fontSize: 14,
                            },
                        },
                    ],
                    series: [
                        {
                            name: '标准化',
                            type: 'bar',
                            barWidth: 12, // 柱子宽度
                            label: {
                                show: true,
                                position: 'right', // 位置
                                color: '#A7D6F4',
                                fontSize: 14,
                                distance: 15, // 距离
                                formatter: '{c}件', // 这里是数据展示的时候显示的数据
                            }, // 柱子上方的数值
                            itemStyle: {
                                barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
                                color: new echarts.graphic.LinearGradient(
                                    1,
                                    0,
                                    0,
                                    0,
                                    [
                                        {
                                            offset: 0,
                                            color: '#51C5FD',
                                        },
                                        {
                                            offset: 1,
                                            color: '#005BB1',
                                        },
                                    ],
                                    false
                                ), // 渐变
                            },
                            data: dataNum,
                        },
                    ],
                };
                barChart.setOption(option);
            });
        },
    },
};
</script>

<style lang='scss' scoped>
#barChart {
    width: 100%;
    height: 100%;
}
</style>
